import useCountDown from '@/hooks/coundDown'
import {PropType} from 'vue'
import {CnMediumSpan} from '../text'

export const SendAuthCode = defineComponent({
  props: {
    onClick: Function as PropType<() => boolean>,
    disabled: Boolean
  },
  setup(props) {
    const {counDownStart, countDownText, isCountDownStart, starting} = useCountDown({
      startVal: 60,
      seconds: 60
    })
    return () => (
      <div
        class='w-100 h-40 rounded-2 flex justify-center items-center flex-nowrap cursor-pointer'
        style={{
          backgroundColor: '#E8E8E8'
        }}
        onClick={() => {
          if (isCountDownStart.value && props.onClick) {
            const bol = props.onClick()
            if (bol) {
              counDownStart()
            }
          }
        }}
      >
        <a-spin spinning={starting.value} size='small'>
          <CnMediumSpan class='text-16 truncate text-xText'>{countDownText.value}</CnMediumSpan>
        </a-spin>
      </div>
    )
  }
})
